import React, { ReactElement } from 'react';
import { View, Image, Text } from 'react-native';

import Button from '../../../../../../components/Button';
import { LessonShowInfo } from '../../../../../../api/course/getUserCoursePage';
import { clickTodayLesson, homeWork } from '../../actions';
import styles from './style';
import { LessonStatus } from '../../../../../ClassRoom/constant';
import { review, vod } from '../../../../../../constant/resource';
import CustomText from '../../../../../../components/Text';

export default (lesson: LessonShowInfo): ReactElement => {
  const { name, status } = lesson;
  return (
    <Button
      style={styles.container}
      onPress={(): void => {
        clickTodayLesson(lesson);
      }}
      activity={status !== LessonStatus.End}
    >
      <Text style={styles.name}>{name}</Text>
      <View style={styles.timeAndLesson}>
        <CustomText style={styles.time}>19:00-19:40 上课</CustomText>
        <View style={styles.lessonType}>
          <Text style={styles.type}>数学</Text>
        </View>
      </View>
      {status === LessonStatus.End ? (
        <View style={styles.vodContent}>
          <View style={styles.line} />
          <Button
            style={styles.content}
            hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
            onPress={(): void => {
              clickTodayLesson(lesson);
            }}
          >
            <Image style={styles.icon} source={vod} resizeMode="contain" />
            <Text style={styles.desc}>看回放</Text>
          </Button>
          <Button
            style={[styles.content, styles.problem]}
            hitSlop={{ left: 20, top: 20, right: 20, bottom: 20 }}
            onPress={homeWork}
          >
            <Image style={styles.icon} source={review} resizeMode="contain" />
            <Text style={styles.desc}>习题订正</Text>
          </Button>
        </View>
      ) : null}
    </Button>
  );
};
